

<template>
  <div>
    <el-form-item :prop="currentItem.field" v-if="currentItem.type === 'form'" :label="currentItem.label" >
      <component :is="renderComponent"
                 v-bind="componentProps"
                 :currentItem="currentItem"
                 v-model="root.form[currentItem.field]"
      ></component>
    </el-form-item>
    <component v-else
               :is="renderComponent"
               v-bind="componentProps"
               :currentItem="currentItem"
    ></component>
  </div>
</template>
<script>
import RenderTabs from "./render-tabs.vue";
import RenderLayout from "./render-layout.vue";
import RenderSelect from "./render-select.vue";
import RenderRadio from "./render-radio.vue";
import RenderCheckbox from "./render-checkbox.vue";
import RenderCascader from "./render-cascader.vue";
import RenderSwitch from "./render-switch.vue";
import RenderSlider from "./render-slider.vue";
import RenderDatePicker from "./render-datepicker.vue";
import RenderTreeSelect from "./render-treeselect.vue";
import RenderImageUpload from "./render-image-upload.vue";
import RenderFileUpload from "./render-file-upload.vue";
const componentMap = {
  "input":"el-input",
  "textarea":"el-input",
  "input-number":"el-input-number",
  "select":"render-select",
  "radio":"render-radio",
  "checkbox":"render-checkbox",
  "cascader":"render-cascader",
  "switch":"render-switch",
  "slider":"render-slider",
  "datepicker":"render-datepicker",
  "tree-select":"render-tree-select",
  "image-upload":"render-image-upload",
  "file-upload":"render-file-upload",
  "tabs":"render-tabs",
  "layout":"render-layout",
}
export default {
  name: "preview-render-item",
  inject:["root"],
  props:{
    currentItem:{
      type:Object
    }
  },
  components:{
    "render-tabs":RenderTabs,
    "render-layout":RenderLayout,
    "render-select":RenderSelect,
    "render-radio":RenderRadio,
    "render-checkbox":RenderCheckbox,
    "render-cascader":RenderCascader,
    "render-switch":RenderSwitch,
    "render-slider":RenderSlider,
    "render-datepicker":RenderDatePicker,
    "render-tree-select":RenderTreeSelect,
    "render-image-upload":RenderImageUpload,
    "render-file-upload":RenderFileUpload,
  },
  computed:{
    /**
     * 寻找对应的组件
     * @returns {*}
     */
    renderComponent(){
      return componentMap[this.currentItem.render]
    },
    /**
     * 组件的配置信息
     */
    componentProps(){
      const componentMap = {

      }
      Object.keys(this.currentItem.props).forEach(key=>{
        componentMap[key] = this.currentItem.props[key].value
      })

      return componentMap;
    }
  }
}
</script>
<style scoped lang="scss">

</style>
